<template>
    <div class="tableWrapper">
        <OperationMenu
                @getTableDataByType="getTableDataByType"
                :selectionFile="selectionFile"
        ></OperationMenu>
        <!-- 面包屑导航栏 -->
        <BreadCrumb class="breadcrumb"></BreadCrumb>
        <FileTable :file-list="fileList" class="file-table"
                   @selectionChange="selectionChange"
                   @getImgReviewData="getImgReviewData"
                   @getPdfReviewData="getPdfReviewData"
        ></FileTable>
        <ImgReview :imgReview="imgReview" @getImgReviewData="getImgReviewData"></ImgReview>
        <PdfReview :pdfReview="pdfReview" ref="pdf" @getPdfReviewData="getPdfReviewData"></PdfReview>
    </div>
</template>

<script>
    import FileTable from "@/components/FileTable";
    import OperationMenu from "@/components/OperationMenu";
    import BreadCrumb from "@/components/BreadCrumb";
    import ImgReview from "@/components/ImgReview";
    import PdfReview from "@/components/PdfReview";
    import {listDir} from "@/api/file";
    import {storageInfo} from "@/api/storage";

    export default {
        name: "File",
        components: {FileTable, OperationMenu, BreadCrumb, ImgReview, PdfReview},
        data() {
            return {
                fileList: [], //  表格数据-文件列表
                selectionFile: [],
                //  查看图片模态框数据
                imgReview: {
                    visible: false,
                    fileUrl: '',
                    name: ''
                },
                pdfReview: {
                    visible: false,
                    fileUrl: '',
                }
            }
        },
        methods: {
            /**
             * 表格数据获取相关事件
             */
            getTableDataByType(search) {
                //  分类型
                this.showFileListByType(search);
                storageInfo().then(res => {
                    this.$store.dispatch("setStorage", res.data);
                })
            },

            //  根据文件类型展示文件列表
            showFileListByType(search) {
                let data = {
                    pid: this.pid,
                    type: this.fileType,
                    fileName: search,
                    _: new Date().getTime()
                };

                listDir(data).then(res => {
                    this.fileList = res.data;
                }).catch(err => console.log(err))
            },

            /**
             * 表格勾选框事件
             */
            selectionChange(selection) {
                this.selectionFile = selection
            },
            //  获取查看大图的数据
            getImgReviewData(row, visible) {
                if (row) {
                    this.imgReview.fileUrl = row.userId + row.filePath;
                    this.imgReview.name = row.name;
                }
                this.imgReview.visible = visible
            },
            getPdfReviewData(row, visible) {
                if (row) {
                    this.pdfReview.fileUrl = row.userId + row.filePath;
                    this.pdfReview.name = row.name;
                }
                this.pdfReview.visible = visible
            }
        },
        created() {
            this.getTableDataByType(this.$store.getters.search);
        },
        computed: {
            pid: function () {
                let pids = this.$route.query.pid;
                if (pids && pids.endsWith(",")) {
                    pids = pids.substring(0, pids.length - 1);
                }
                let pidList = pids ? pids.split(',') : [pids];
                let pid = pidList[pidList.length - 1];
                if (pid === '') {
                    pid = 0;
                }
                return pid
            },
            fileType: function () {
                return Number(this.$route.query.fileType)
            },
            fileName: function () {
                return this.$route.query.fileName
            }
        }
    }
</script>
<style scoped>
    .tableWrapper {
        padding: 20px;
        width: 100%;
        display: block;
    }
    .file-table{
        overflow: hidden;
        height: calc(100vh - 176px);
    }
</style>
